Computer Science Notes: Tree Graphs & The Asynchronous Event Loop

Document Object Model (DOM) Tree Hierarchy

The browser engine parses raw HTML tags and constructs a structural tree graph of Nodes. The root object is document, branching down to html, head, and body. Every single node within the DOM tree is instantiated in memory as a live, dynamic object containing mutable properties and callable methods accessible directly via runtime scripting.

===================================================================================
                   DOCUMENT OBJECT MODEL (DOM) TREE HIERARCHY
===================================================================================

                        [ document ]
                             │
                         [ html ]
                        /        \
                    [ head ]    [ body ]
                                 /    \
                           [ div ]    [ section ]
                            /   \          │
                       [ h1 ]  [ p ]    [ button ]

===================================================================================

The Asynchronous Event Loop

JavaScript operates natively as a single-threaded runtime environment but achieves non-blocking, highly concurrent behavior through a dedicated orchestration system:

• Call Stack: Operates on a Last-In, First-Out (LIFO) basis, executing active synchronous function frames.
• Web APIs: Browser-managed background threads handling timers (setTimeout), network sockets (fetch), and event listeners.
• Task Queue: Operates on a First-In, First-Out (FIFO) basis, queuing completed callback functions ready for execution.
• Event Loop: The perpetual sentinel that monitors the Call Stack; the moment the stack clears, it instantly pushes the next callback from the Task Queue onto the stack.